<template >
<div>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/admin/index' }">
      <i class="el-icon-s-promotion"></i>
      管理后台首页
    </el-breadcrumb-item>
    <el-breadcrumb-item>宿舍分配</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  </div>
  <template>
    <el-tabs tab-position="left" type="card" v-model="activeName"   @tab-click="handleClick">
        <el-tab-pane :label="item+'楼'" v-for="(item) in floorArr">
          <el-card  v-for="(items,index) in bed">
            <h1 style="text-align: center;font-size: 25px;line-height: 30px"><i class="el-icon-office-building"></i>{{items[0].roomnum}}</h1>
            <el-row :gutter="25">
              <el-col :span="6" v-for="(item,indexs) in items" >
            <el-card style="border-radius: 4px;margin-top:20px;height: 200px;">
                <div style="background-color: #d3dce6;position: relative;left: -20px;top: -20px;line-height: 35px;width: 150%">
                  <span class="bednum" style="margin-left: 15px;font-size: 12px;font-weight: bold;" @click="bedinfo(item.id)"> <img src="../../../assets/bed/床位.png" height="16" width="16" />
                    {{item.bednum}}</span>
                  <span style="font-size: 12px;margin-left: 30%">姓名: {{item.name==null? "— —":item.name}}
                    <i class="el-icon-close"  v-if="item.name==null? false:true" @click="bedout(index,indexs)"></i>
                  </span>
                </div>
                <el-row>
                  <el-col :span="12" v-if="item.name==null? true:false" >
                    <div class="whiteBed"  style="width: 100px;height:100px;border-radius:80px ;" @click="insertbed(item.id,item.bednum,items[0].roomnum)">
                      <img src="../../../assets/bed/床位 空床 .png" height="32" width="32"  style="position: relative;left: 35px;top: 32px" />
                    </div>
                  </el-col>
                  <el-col :span="12" v-else>
                    <div style="width: 100px;height:100px;border-radius:80px ;background-color:#E6A23C;">
                      <img src="../../../assets/bed/icon／床位.png" height="32" width="32" style="position: relative;left: 35px;top: 32px"/>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <img src="../../../assets/bed/血压.png" height="24" width="24" style="margin-top: 15px"/>
                  <span style="font-weight: bold; font-size: 14px;color: #b1b1b1;margin-left: 40px;display: block;margin-top: -25px">{{item.bp==null? "— —":item.bp}} mmHg</span>
                    <img src="../../../assets/bed/血糖.png" height="24" width="24" style="margin-top: 20px" />
                    <span style="font-weight: bold;font-size: 14px;color: #b1b1b1;margin-left: 40px;display: block;margin-top: -25px">{{item.bg==null? "— —":item.bg}} mmol</span>
                    <el-button
                        size="mini"
                        type="warning" style="margin-top: 25px;margin-left: 20px" @click="openUpdateDialog(item.id)">编辑
                    </el-button>
                    <el-button
                        size="mini"
                        type="info"
                        style="" @click="deleteRoom(index,indexs)"
                     >删除
                    </el-button>
                  </el-col>
                </el-row>
            </el-card>
                </el-col>
            </el-row>
         </el-card>

        </el-tab-pane>
    </el-tabs>

    <el-dialog
        title="床位信息"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>

        <el-form label-position="right" label-width="150px" :model="bedinfoByid" st>
          <el-form-item label="编号：">
            <span v-text="bedinfoByid.id"></span>
          </el-form-item>
          <el-form-item label="床位号：">
            <span v-text="bedinfoByid.bednum"></span>
          </el-form-item>
          <el-form-item label="所在楼层：">
            <span v-text="bedinfoByid.floor"></span>
          </el-form-item>
          <el-form-item label="所在房间：">
            <span v-text="bedinfoByid.roomnum"></span>
          </el-form-item>
          <el-form-item label="床位价格：">
            <span v-text="bedinfoByid.price"></span>
          </el-form-item>
          <el-form-item label="床位是否入住：">
            <span v-text="bedinfoByid.enable==0? '否':'是'"></span>
          </el-form-item>
          <el-form-item label="老人名称：">
            <span v-text="bedinfoByid.name==null? '空':bedinfoByid.name"></span>
          </el-form-item>
          <el-form-item label="老人电话：">
            <span v-text="bedinfoByid.phoneNumber==null? '空':bedinfoByid.phoneNumber"></span>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <div id = "box" v-show="tableShow" style="position: fixed; top: 200px;left: 550px;width: 600px;">
      <template>
        <el-card>
          <i class="el-icon-close" style="font-size: 30px;margin-left: 97%;" @click="resetFormCheck('ruleForm')"></i>
            <h1 style="text-align: center">入住添加</h1>
            <el-divider></el-divider>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" >
              <el-form-item label="房间号:" >
                <el-input v-model="ruleForm.roomnum" readOnly style="width: 300px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
              </el-form-item>
              <el-form-item label="床位号:" >
                <el-input v-model="ruleForm.bednum"  readOnly style="width: 300px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
              </el-form-item>
              <el-form-item label="老人姓名:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请选择入住登记信息" readOnly style="width: 300px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
                <el-button @click="checkInfo()">选择</el-button>
              </el-form-item>
              <el-form-item label="年龄:" prop="name">
                <el-input v-model="ruleForm.age" placeholder="请选择入住登记信息" readOnly style="width: 380px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
              </el-form-item>
              <el-form-item label="联系方式:" prop="name">
                <el-input v-model="ruleForm.phoneNumber" placeholder="请选择入住登记信息" readOnly style="width: 380px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
              </el-form-item>
              <el-form-item label="入住登记日期:" prop="name">
                <el-input v-model="ruleForm.date" placeholder="请选择入住登记信息" readOnly style="width: 380px;" ></el-input>
                <i class="el-icon-lock" style="position: relative;left: -20px"></i>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitFormCheck('ruleForm')">入住</el-button>
                <el-button @click="resetFormCheck('ruleForm')">取消</el-button>
              </el-form-item>
            </el-form>
        </el-card>
      </template>
    </div>
    <el-dialog
        title="请选择入住登记信息"
        :visible.sync="DialogVisible"
        width="40%"
        center>
      <span slot="footer" class="dialog-footer">
        <el-input placeholder="请输入搜索的姓名" v-model="Content" id="input-with-select" style="width: 300px;left: -200px;top:-25px">
          <el-button slot="append" icon="el-icon-search" @click="checkSelectByname()"></el-button>
        </el-input>
        <template>
  <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%;height:500px;overflow:scroll">
    <el-table-column
        type="index"
        width="50">
    </el-table-column>
    <el-table-column
        property="name"
        label="姓名"
        width="120">
    </el-table-column>
    <el-table-column
        property="age"
        label="年龄"
        width="120">
    </el-table-column>
     <el-table-column
         property="phoneNumber"
         label="联系方式"
         width="120">
    </el-table-column>
    <el-table-column
        property="date"
        label="入住登记日期">
    </el-table-column>
  </el-table>
</template>
    <el-button style="margin-top: 20px" @click="DialogVisible = false;">取 消</el-button>
    <el-button type="primary" @click="DialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
  </template>

  <el-dialog
      title="床位信息修改"
      :visible.sync="updatedialogVisible"
      width="40%">
    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" >
    <el-form-item label="楼层号:" >
      <el-select v-model="upruleForm.floor" placeholder="请选择">
        <el-option
            v-for="item in floorArr"
            :key="item"
            :label="item+'楼'"
            :value="item">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="房间号:" >
      <el-input v-model="upruleForm.roomnum" placeholder="空" ></el-input>
    </el-form-item>
    <el-form-item label="床位号:" >
      <el-input v-model="upruleForm.bednum" placeholder="空"></el-input>
    </el-form-item>
    <el-form-item label="床位价格:" >
      <el-input v-model="upruleForm.price" placeholder="空" ></el-input>
    </el-form-item>
      <el-form-item label="入住老人:" >
        <el-input v-model="upruleForm.name" placeholder="空" style="width: 300px"></el-input>
        <i class="el-icon-lock" style="position: relative;left: -20px"></i>
        <el-button @click="checkInfo()">选择</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitFormupdate('ruleForm')">确定</el-button>
        <el-button @click="resetFormCheck('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeName: '0',
      floorArr:[],
      bed:[],
      centerDialogVisible: false,
      updatedialogVisible:false,
      upruleForm: {
        id:'',
        floor: '',
        roomnum: '',
        price: '',
        bednum: '',
        checkId:'',
        name:''
      },
      DialogVisible:false,
      bedinfoByid:{},
      tableShow:false,
      ruleForm: {
        roomnum:'',
        bednum:'',
        id:"",
        checkId:'',
        name: '',
        age:'',
        phoneNumber:'',
        date:""
      },
      tableData:[],
      Content:'',
      rules: {
        name: [
          { required: true, message: '请选择入住登记信息', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
         this.loadbed();
      console.log(this.bed);
    },
    checkInfo(){
      this.DialogVisible = true;
      this.axios.create({
        headers:{
          'Authorization':localStorage.getItem("jwt")
        }
          }
      ).get("http://localhost:8080/checkInfo/list?Content="+this.Content).then((response)=>{
        this.tableData = response.data.data;
      })
    },openUpdateDialog(id){
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/bed/"+id+"/upgetStandByid").then((response)=>{
        console.log(response.data.data);
        this.upruleForm = response.data.data;
      })
      this.updatedialogVisible = true;

    },
    handleCurrentChange(val)
    {
      this.ruleForm.checkId = val.id;
      this.ruleForm.name = val.name;
      this.ruleForm.age = val.id;
      this.ruleForm.phoneNumber = val.phoneNumber;
      this.ruleForm.date = val.date;
      this.upruleForm.checkId = val.id;
      this.upruleForm.name = val.name;
    },
    insertbed(id,bnum,rnum)
  {
    this.ruleForm.id = id;
    this.ruleForm.bednum = bnum;
    this.ruleForm.roomnum = rnum;
    this.tableShow = true;
    var box = document.getElementById("box");
    box.onmousedown=function(event){
      event=event||window.event;//解决浏览器兼容问题

      //div的左偏移量=鼠标.clientX-元素.ofsetLeft
      let boxLeft=event.clientX-box.offsetLeft;

      //div的上偏移量=鼠标.clientY-元素.ofsetTop
      let boxTop=event.clientY-box.offsetTop;

      //为document绑定一个onmousemove事件
      document.onmousemove=function(event){
        event=event||window.event;//解决浏览器兼容问题

        //获取鼠标的坐标
        let left=event.clientX-boxLeft;
        let top=event.clientY-boxTop;

        //盒子移动的最大偏移量=浏览器宽度-盒子宽度
        let moveLeft=document.documentElement.clientWidth-box.offsetWidth;
        let moveTop=document.documentElement.clientHeight-box.offsetHeight;

        //让盒子不超出浏览器范围
        if(left<=0){
          left=0;
        }
        else if(left>moveLeft){
          left=moveLeft;
        }
        else{
          box.style.left=left+"px";
        }

        if(top<=0){
          top=0;
        }
        else if(top>moveTop){
          top=moveTop;
        }
        else{
          box.style.top=top+"px";
        }

      };

      //为document绑定一个鼠标抬起事件，鼠标松开时，将box固定在当前位置
      document.onmouseup=function(){
        //取消document的onmousemove事件
        document.onmousemove=null;

        //取消document的onmouseup事件
        document.onmouseup=null;
      };
    };
  },
    Inbed(formName)
    {
      let arr ={bedId:this.ruleForm.id,checkId:this.ruleForm.checkId};
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).post("http://localhost:8080/room/add-new?"+this.qs.stringify(arr)).then((response)=>{
        if(response.data.state==20000)
        {
          this.resetFormCheck(formName);
          this.loadbed();
          this.$message.success("入住成功！");
        }
        else {
          this.$message.error(response.data.message);
        }
      })
    },
    submitFormCheck(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Inbed(formName);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetFormCheck(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.phoneNumber ="";
      this.ruleForm.age ="";
      this.ruleForm.date="";
      this.ruleForm.name="";
      this.tableShow=false;
      this.Content="";
      this.upruleForm.checkId = '';
      this.upruleForm.name='';
      this.updatedialogVisible =false;
    },
    submitFormupdate(formName)
    {
      this.$refs[formName].validate((valid) => {
      if (valid) {
        console.log(this.upruleForm);
        this.axios.create({
              headers:{
                'Authorization':localStorage.getItem("jwt")
              }
            }
        ).post("http://localhost:8080/bed/update?"+this.qs.stringify(this.upruleForm)).then((response)=>{
          if(response.data.state==20000)
          {
            this.resetFormCheck(formName);
            this.updatedialogVisible =false;
            this.$message.success("修改成功!");
            this.loadbed();
          }
          else {
            this.$message.error(response.data.message);
          }
        })

      } else {
        console.log('error submit!!');
        return false;
      }
    });
    },
    checkSelectByname()
    {
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/checkInfo/list?Content="+this.Content).then((response)=>{
        this.tableData = response.data.data;
      })
    },
    bedinfo(id)
    {
      this.bedinfoByid={};
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/bed/"+id+"/getStandard").then((response)=>{
        if(response.data.state==20000)
        {
          this.bedinfoByid = response.data.data;
          this.centerDialogVisible=true;
        }
      else  if(response.data.state==40400) {
          this.$alert(response.data.message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'error',
                message: response.data.message
              });
            }
          });
        }
      else {
        this.$message.error(response.data.message);
        }
      })

    },
    bedout(index,indexs)
    {
      this.$confirm('该老人确认退出该床位吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.create({
              headers:{
                'Authorization':localStorage.getItem("jwt")
              }
            }
        ).post("http://localhost:8080/bed/"+this.bed[index][indexs].checkId+"/"+this.bed[index][indexs].id+"/deleteBycheckId").then((response)=>{
          if(response.data.state  ==20000)
          {
            this.$message.success("退床成功！");
            this.loadbed();
          }
          else {
            this.$message.success(response.data.message);
          }
        })
      }).catch(() => {
      });
    },
    deleteRoom(index,indexs){
      this.$confirm('确认删除该床位吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.bed[index][indexs].enable == 1) {
          this.$message.warning("该房间已有老人入住,无法删除该床位")
        }
        else {
          this.axios.create({
                headers:{
                  'Authorization':localStorage.getItem("jwt")
                }
              }
          ).post("http://localhost:8080/bed/"+this.bed[index][indexs].id+"/deleteByid").then((response)=>{
            if(response.data.state==20000)
            {
              this.bed[index].splice(indexs,1);
              if(this.bed[index].length==0)
              {
                this.bed.splice(index,1);
              }
              this.$message.success("删除成功！");
            }
            else {
              this.$message.error(response.data.message);
            }

          })
        }
      }).catch(() => {
      });
    },
    loadbed()
    {
      this.bed = [];
      this.axios.create({
            headers:{
              'Authorization':localStorage.getItem("jwt")
            }
          }
      ).get("http://localhost:8080/bed/"+this.floorArr[this.activeName]+"/list").then((response)=>
      {
        for (let i = 0; i < response.data.length;i++) {
          let bedArr = [];
          let item = response.data[i].roomnum;
          for (let j = i; j < response.data.length; j++) {
            response.data[j].bg!=null? response.data[j].bg = parseFloat(response.data[j].bg).toFixed(2):null;
            response.data[j].bp!=null?  response.data[j].bp = parseFloat(response.data[j].bp).toFixed(2):null;
            if(response.data[j].roomnum == item)
            {
              bedArr.push(response.data[j]);
              if(j==response.data.length-1)
              {
                i=j;
                this.bed.push(bedArr);
              }
            }
            else {
              if(bedArr.length!=0)
              {
                this.bed.push(bedArr);
              }
              i = j-1;
              break;
            }
          }
        }
      })
    }

  },
  mounted:function ()
  {
    this.axios.create({
          headers:{
            'Authorization':localStorage.getItem("jwt")
          }
        }
    ).get("http://localhost:8080/bed/floor-list").then((response)=>
    {
    this.floorArr = response.data;
      this.loadbed();
    })
    console.log(this.floorArr);

  }
};
</script>

<style>
.el-icon-close:hover{
  color: deepskyblue;
}
.bednum:hover{
  color: deepskyblue;
}
.whiteBed{
  background-color:rgba(227,229,237,0.99);
}
.whiteBed:hover{
 background-color:deepskyblue;
}
#input-with-select{
  height: 30px;
}
</style>